<template>
  <div id="container" class="text-white text-sm bg-primary-300 min-h-screen pt-12">
    <div class="text-center text-2xl p-8">重置密码</div>
    <div class="flex items-center justify-center">
      <div class="w-1/4 p-4 bg-gray-100 rounded-lg shadow-lg">
        <div class="text-black text-center p-4">
          <p class="font-bold py-4">输入新密码</p>
          <div>
            <input
              v-model="newPassword"
              class="outline-0 h-9 rounded border border-green-600 placeholder-gray-400 w-64 px-2 py-1 max-w-[280px]"
              type="password"
              placeholder="新密码"
            />
          </div>
          <div>
            <input
              v-model="confirmPassword"
              class="outline-0 h-9 rounded border border-green-600 placeholder-gray-400 w-64 px-2 py-1 max-w-[280px] mt-2"
              type="password"
              placeholder="确认新密码"
            />
          </div>
        </div>
        <div class="flex justify-center">
          <button
            v-on:click="handleResetPasswordConfirm"
            class="bg-green-500 text-white px-4 py-2 rounded"
          >
            重置密码
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { resetPassword as apiResetPassword, resetPasswordConfirm as apiResetPasswordConfirm } from '@/api/account';
import { showToast } from '@/utils/toast';

const email = ref('');
const newPassword = ref('');
const confirmPassword = ref('');

const route = useRoute();
const uid = route.params.uid; // 从路由参数中获取 uid
const token = route.params.token; // 从路由参数中获取 token

async function handleResetPassword() {
  if (!email.value) {
    showToast('请输入邮箱地址', 'error');
    return;
  }

  try {
    const response = await apiResetPassword({ email: email.value });
    console.log(response);
    showToast('邮件已发送', 'success');
  } catch (error) {
    console.error('发送邮件失败:', error);
    handleError(error);
  }
}

async function handleResetPasswordConfirm() {
  if (!newPassword.value || !confirmPassword.value) {
    showToast('请输入新密码和确认密码', 'error');
    return;
  }

  if (newPassword.value !== confirmPassword.value) {
    showToast('两次输入的密码不一致', 'error');
    return;
  }

  try {
    const response = await apiResetPasswordConfirm({
      new_password: newPassword.value,
      re_new_password: confirmPassword.value,
      uid: uid,
      token: token
    });
    console.log(response);
    showToast('密码重置成功', 'success');
  } catch (error) {
    console.error('重置密码失败:', error);
    handleError(error);
  }
}

function handleError(error) {
  if (error.response && error.response.data) {
    const errorData = error.response.data;
    let errorMessage = '操作失败，请重试';

    if (errorData.new_password && Array.isArray(errorData.new_password)) {
      errorMessage = errorData.new_password.join(' ');
    } else if (errorData.detail) {
      errorMessage = errorData.detail;
    } else if (Array.isArray(errorData) && errorData.length > 0) {
      errorMessage = errorData.join(' ');
    }

    showToast(errorMessage, 'error');
  } else {
    showToast('操作失败，请检查网络连接', 'error');
  }
}
</script>
